<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{width:100px;height:60px;}
        *{padding:10px;margin: 10px;}
    </style>
</head>
<body>
    
</body>
<script>

    // 枝对象
    function Team(id){
        this.children = [];
        this.ele = document.createElement("div");
        this.ele.id = id;
    }
    Team.prototype.add = function(child){
        this.children.push(child);
        this.ele.appendChild(child.ele);
    }
    Team.prototype.remove = function(child){
        const index = this.children.indexOf(child);
        if(index !== -1){
            this.children.splice(index, 1);
        }
        this.ele.removeChild(child.ele);
    }
    Team.prototype.addBorder = function(){
        this.ele.style.border = "solid 2px red";
        this.children.forEach(val=>{
            val.addBorder();
        })
    }
    Team.prototype.removeBorder = function(){
        this.ele.style.border = "none";
        this.children.forEach(val=>{
            val.removeBorder();
        })
    }

    // 叶对象
    function Item(src){
        // this.children = null;
        this.ele = document.createElement("img");
        this.ele.src = src;
    }
    Item.prototype.add = function(){
        console.log("这是一个叶对象，不能添加子对象了")
    }
    Item.prototype.remove = function(){
        console.log("这是一个叶对象，没有子对象可删")
    }
    Item.prototype.addBorder = function(){
        this.ele.style.border = "solid 2px red";
    }
    Item.prototype.removeBorder = function(){
        this.ele.style.border = "none";
    }


    // div#box
    const box = new Team("box");
    document.body.appendChild(box.ele)
        // div#xbox1
        const xbox1 = new Team("xbox1");
            // img
            const img1 = new Item("https://img2.baidu.com/it/u=371735706,717192252&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1678294800&t=0fdc48701c68ff5bb0734b8fbe32ef0c")
        xbox1.add(img1)
        // div#xbox2
        const xbox2 = new Team("xbox2");
            // img
            const img2 = new Item("https://img0.baidu.com/it/u=2224195194,2552213713&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1678294800&t=d5c79f5e0d625bd71578761318c6f4b5")
        xbox2.add(img2)
        // img
        const img3 = new Item("https://img1.baidu.com/it/u=3098053465,2441568154&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1678294800&t=bbdd381051faa34f518430fd5212edb5")

    box.add( xbox1 );
    box.add( xbox2 );
    box.add( img3 )




    // box
    //     xbox1
    //         img1
    //     xbox2
    //         img2
    //     img3


    box.addBorder();

    xbox2.removeBorder();

    img2.addBorder();





</script>
</html>